<!DOCTYPE html>
<html lang="zh">
<head>
  <title>ionic JS幻灯片</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="../../lib/ionic/css/ionic.min.css">
</head>
<style>
  /*NOTE
  要让一个子元素的高度达到指定的height属性的大小，需要为它的所有父元素设置高度
  直到元素`html`时才能设置`height: 100%`，向下直到有格式的元素需要才需要设置`positive: relative`
  注意需要考虑margin和padding，高度超出时将会自动拓展
  */

  .blue {
    background-color: deepskyblue;
  }
  .yellow {
    background-color: yellow;
  }
  .pink {
    background-color: pink;
  }

  .slider {height: 720px;}
  .slider-slides {height: 100%;}
  .slider-pager {height: 15%;}
  ion-slide {height: 100%;}
  .box {height: 100%;}
  .box h1 {
    position: relative;
    text-align: center;
    top: 40%;
  }
</style>
<body ng-app="starter">
  <!--NOTE
      prop delegate-handle str 该句柄用$ionicSlideBoxDelegate来标志这个滑动框
      prop does-continue bool 是否允许循环切换
      prop auto-play bool 是否自动播放
      prop slide-interval number 自动播放的间隔。默认为4000ms
      prop show-pager bool 是否显示分页器
      event pager-click exp 当点击页面时触发
      event on-slide-changed exp 当滑动时触发
      event active-slide exp 将模型绑定到当前滑动框

      method $ionicSlideBoxDelegate.update() 重绘幻灯片。当容器尺寸发生变化时需要调用
      method $ionicSlideBoxDelegate.slide(to: int, speed?: int) 切换到指定幻灯片
      method $ionicSlideBoxDelegate.enableSlide(shouldEnable?: bool) 是否应当启用幻灯片
      method $ionicSlideBoxDelegate.previous() 切换到前一张幻灯片
      method $ionicSlideBoxDelegate.next() 切换到后一张幻灯片
      method $ionicSlideBoxDelegate.currentIndex()
      method $ionicSlideBoxDelegate.slideCount()
  -->
  <ion-slide-box auto-play="true">
    <ion-slide>
      <div class="box blue"><h1>全世界的好东西</h1></div>
    </ion-slide>
    <ion-slide>
      <div class="box yellow"><h1>天天五折起</h1></div>
    </ion-slide>
    <ion-slide>
      <div class="box pink"><h1>立即开启</h1></div>
    </ion-slide>
  </ion-slide-box>

  <script src="../../lib/ionic/js/ionic.bundle.js"></script>
  <script src="../../js/app.js"></script>
  <script>
    angular.module("starter", ["ionic"]);
  </script>
</body>
</html>
